<template>
  <div class="home">
    <Header head-title="充值" go-back='true'></Header>
    <section class="group Select">
        <h3 class="HomeH fonts">选择要充值的医院</h3>
        <el-select v-model="value" clearable placeholder="请选择缴费医院" class="SeleHos">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
    </section>
    <section class="group">
        <h3 class="HomeH fonts">选择要充值的健康卡</h3>
        <swiper ref="mySwiper" :options="swiperOptions" class="SwiperOut">
            <swiper-slide v-for="(item, index) in SwiperDateList" :key="index">
              <section class="swiperIn" @click="Code()">
              <div class="card_center">
                <div class="center_left">
                    <span class="left_top">
                        爱因斯坦
                    </span>
                    <span class="left_bottom">
                        4127*********1234
                    </span>
                </div>
                <div class="center_right">
                    <img class="right_top" src="../../assets/img/logo_.png" alt="">
                    <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                </div>
            </div>
            </section>
            </swiper-slide>
          </swiper>
    </section>
    <section class="group">
        <h3 class="HomeH fonts">选择充值金额</h3>

        <section class="RadioGroup">
            <div class="left fonts label radio" :class="labelMe == index ? 'radioActive' : ''" @click="RadioMe(index,item.label)" v-for="(item,index) in RadioList" :key="index">
                {{ item.name }}
            </div>
        </section>
        <div v-if="InputText">
            <input class="searchIn" placeholder="请输入充值金额" type="text">
        </div>
    </section>

    <section class="group1">
      <el-button class="Login" @click="drawer = true" type="primary"  style="margin-left: 16px;">
        确定充值
      </el-button>
    </section>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :modal="false" direction="btt" size="45%">
      <section class="SelectTan">
        <h3 class="fonts">选择充值渠道</h3>
        <section class="Select TanDiv" @click="SelectPay()">
          <div class="Select">
            <img class="TanIcon" src="../../assets/img/wechat.png" alt="">
            <p class="fonts">选择充值渠道</p>
          </div>
          <div class="recoBg2 TanRight" v-if="SelectWe">
            <img src="../../assets/img/right.png" alt="">
          </div>
        </section>
        <section class="Select TanDiv" @click="SelectPay1()">
          <div class="Select">
            <img class="TanIcon" src="../../assets/img/LogoB.png" alt="">
            <p class="fonts">中国银行 尾号3727</p>
          </div>
          <div class="recoBg2 TanRight" v-if="SelectWe1">
            <img src="../../assets/img/right.png" alt="">
          </div>
        </section>
        <section class="Select TanDiv" @click="cardPay()">
          <div class="Select">
            <img class="TanIcon" src="../../assets/img/cardPay.png" alt="">
            <p class="fonts">添加银行卡充值</p>
          </div>
          <div class="arrow Select">
            <img src="../../assets/img/arrow.png" alt="">
          </div>
        </section>
      </section>
      <el-button @click="drawer = true" type="primary"  style="margin-left: 16px;">
        确定充值
      </el-button>
    </el-drawer>

  </div>
</template>

<script>
import Header from '../../components/Header'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  data () {
    return {
      value: '',
      options: [{
        value: '1',
        label: '平顶山市第一人民医院'
      }, {
        value: '2',
        label: '平顶山市妇幼保健院'
      }, {
        value: '3',
        label: '平煤集团总医院'
      }, {
        value: '4',
        label: '传染病医院'
      }, {
        value: '5',
        label: '二院'
      }],

      SwiperDateList: [
        { week: '周一', date: '3月21号', num: '无号' },
        { week: '周二', date: '3月22号', num: '无号' },
        { week: '周三', date: '3月23号', num: '有号' },
        { week: '周四', date: '3月24号', num: '有号' },
        { week: '周五', date: '3月25号', num: '无号' },
        { week: '周六', date: '3月26号', num: '有号' },
        { week: '周日', date: '3月27号', num: '有号' }
      ],
      //  swiper 触摸滑动
      swiperOptions: {
        slidesPerView: 2,
        spaceBetween: 10,

        breakpoints: {
          320: { // 当屏幕宽度大于等于320
            slidesPerView: 1.4,
            spaceBetween: 1
          },
          768: { // 当屏幕宽度大于等于768
            slidesPerView: 1.6,
            spaceBetween: 20
          },
          1280: { // 当屏幕宽度大于等于1280
            slidesPerView: 6,
            spaceBetween: 30
          }
        }
      },
      radio1: '',
      RadioList: [
        { name: '100元', label: '1' },
        { name: '200元', label: '2' },
        { name: '300元', label: '3' },
        { name: '400元', label: '4' },
        { name: '500元', label: '5' },
        { name: '其他', label: '6' }
      ],
      labelMe: -1,
      InputText: false,
      drawer: false,
      SelectWe: false,
      SelectWe1: false
    }
  },
  components: {
    Header,
    Swiper,
    SwiperSlide
  },
  methods: {
    handleClick (tab, event) {
    },
    RadioMe (index, label) {
      this.labelMe = index
      if (label === '6') {
        this.InputText = true
      } else {
        this.InputText = false
      }
    },
    SelectPay () {
      this.SelectWe = true
      this.SelectWe1 = false
    },
    SelectPay1 () {
      this.SelectWe1 = true
      this.SelectWe = false
    },
    //  添加银行卡
    cardPay () {
      this.$router.push({
        path: '/cardPay'
      })
    }
  }
}
</script>

<style scoped>
.home {
    padding-top: 1rem;
    background: none;
}
.swiperIn {
    width: 4.13rem;
    height: 2.33rem;
}
.group1 {
padding: 0.4rem;
}
.card_center {
    top: 1rem;
}
.center_left {
    font-size: 0.25rem;
}
.left_bottom {
    font-size: 0.2rem;
}
.right_bottom {
    width: 1rem;
    height: 1rem;
}
.left_top {
    height: 0.35rem;
}
.right_top {
    width: 0.2rem;
    height: 0.2rem;
}
.center_right {
    height: 1rem;
    left: -0.3rem;
}
.SwiperOut {
    padding-left: 0.2rem;
}
.searchIn {
    width: 80%;
    background-image: none;
    padding-left: 0.3rem;
}
</style>
<style>
.el-radio {
    margin-right: 0;
    width: 30%;
}
</style>
